<template>
  <div class="approval-page">
    <el-card class="approval-container" shadow="hover">
      <h2>审批记录</h2>

      <!-- 审批记录表格 -->
      <el-table
          :data="approvalData"
          style="width: 100%"
          border
          v-loading="loading"
          @selection-change="handleSelectionChange"
      >
        <el-table-column prop="storeName" label="店铺名" align="center" width="180px"/>
        <el-table-column prop="userName" label="店主用户名" align="center" width="100px"/>
        <el-table-column prop="phone" label="订餐电话" align="center" width="100px"/>
        <el-table-column prop="storeStartTime" label="营业开始时间" align="center" width="100px"/>
        <el-table-column prop="storeEndTime" label="营业结束时间" align="center" width="100px"/>
        <el-table-column prop="storeIntro" label="店铺简介" align="center" width="200px"/>
        <!-- 新增 License 列 -->
        <el-table-column label="营业执照" align="center" width="300px">
          <template #default="scope">
            <img :src="scope.row.license" alt="营业执照" style="width: 200px; height:200px; object-fit: cover;"/>
          </template>
        </el-table-column>

        <!-- 新增 Permit 列 -->
        <el-table-column label="经营许可证" align="center" width="300px">
          <template #default="scope">
            <img :src="scope.row.permit" alt="经营许可证" style="width: 200px; height: 200px; object-fit: cover;"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button
                size="small"
                type="success"
                @click="approve(scope.row)"
            >
              通过
            </el-button>
            <el-button
                size="small"
                type="danger"
                @click="reject(scope.row.userId)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          style="margin-top: 20px; text-align: center;"
          background
          layout="prev, pager, next, sizes"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          @size-change="handlePageSizeChange"
          @current-change="handlePageChange"
      />
    </el-card>
  </div>
</template>

<script>
import {ref, reactive, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

export default {
  name: "ApprovalPage",
  setup() {
    const approvalData = ref([]);
    const total = ref(0);
    const pageSize = ref(5);
    const currentPage = ref(1);
    const loading = ref(false);

    const fetchApprovals = async () => {
      loading.value = true;
      try {
        const { data } = await axios.get("/meals/store/getApply", {
          params: {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
          },
        });
        approvalData.value = (data.data.list || []).map((item) => ({
          ...item,
          license: item.license.replace(/^"|"$/g, ""), // 移除引号
          permit: item.permit.replace(/^"|"$/g, ""),   // 移除引号
        }));
        total.value = data.data.total || 0;
      } catch (error) {
        ElMessage.error("加载审批记录失败，请稍后再试");
      } finally {
        loading.value = false;
      }
    };


    const handlePageSizeChange = (size) => {
      pageSize.value = size;
      fetchApprovals();
    };

    const handlePageChange = (page) => {
      currentPage.value = page;
      fetchApprovals();
    };

    const approve = async (row) => {
      try {
        const insertStoreForm = {
          storeName: row.storeName,
          userId: row.userId,
          userName: row.userName,
          phone: row.phone,
          storeStartTime: row.storeStartTime,
          storeEndTime: row.storeEndTime,
          storeIntro: row.storeIntro,
          permit: row.permit,
          license: row.license,
        };
        await axios.post("/meals/store/insertStore", insertStoreForm);
        ElMessage.success("审批通过成功");
        fetchApprovals();
      } catch (error) {
        ElMessage.error("审批通过失败，请稍后再试");
      }
    };


    const reject = async (userId) => {
      ElMessageBox.confirm(
          "确定要拒绝该申请吗？",
          "拒绝审批",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(async () => {
            await axios.delete("/meals/store/noApply", {params: {userId}});
            ElMessage.success("审批拒绝成功");
            fetchApprovals();
          })
          .catch(() => {
            ElMessage.info("已取消操作");
          });
    };

    onMounted(() => {
      fetchApprovals();
    });

    return {
      approvalData,
      total,
      pageSize,
      currentPage,
      loading,
      handlePageSizeChange,
      handlePageChange,
      approve,
      reject,
    };
  },
};
</script>

<style scoped>
.approval-page {
  padding: 20px;
}

.approval-container {
  margin: auto;
  max-width: 1600px;
}
</style>
